<template>
  <div class="channelHead">
    <div class="cheadTopbar">
      <div class="cheadTopbarLink">
        <a href="http://www.sina.com.cn/">新浪首页</a>&nbsp;&gt;&gt;
        &nbsp;
        <a href="http://news.sina.com.cn/o/2017-04-28/doc-ifyetstt3667927.shtml" target="_blank">中国航母让对手感到威胁？</a>
        <a href="http://news.sina.com.cn/o/2017-04-28/doc-ifyetxec6798140.shtml" target="_blank">22名红通人员藏匿线索曝光</a>
        <a href="http://news.sina.com.cn/o/2017-04-28/doc-ifyetxec6802053.shtml" target="_blank">美韩称萨德数天能启用</a>　
      </div>
      <div style="position: relative;" @mouseenter="showLoginBox" @mouseleave="hideLoginBox">
        <span id="spnLoginText">
          登录
        </span>
        <div id="dvLoginBox" v-show="isLoginBoxVisible" @mouseenter="keepLoginBoxVisible" @mouseleave="hideLoginBox">
          <div class="leftPanel">
            <p>用微博客户端扫描安全登录</p>
            <img node-type="qrcode_img" v-bind:src="currentImage.src" v-bind:alt="currentImage.alt">
          </div>
          <div class="rightPanel">
            <p>新浪微博、博客、邮箱帐号，请直接登录</p>
          </div>
          <span id="spnCloseButton" @click="closeLoginBox">X</span>
        </div>
      </div>
    </div>
  </div>
  <div>
    <!-- 分类导航列表 -->
    <ul class="category-navigation" id="slideWrap">
      <li v-for="(slide, index) in slides" :key="index" @mouseover="jump(index)" :class="{'active': playing == index}">
        <a v-bind:href="slide.href">{{ slide.categoryName }}</a>
      </li>
    </ul>
  </div>
  <div id="wrap">
    <CarouselComponent />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import './assets/style.css';
import CarouselComponent from './comp.vue';

// 登录弹窗显示状态
const isLoginBoxVisible = ref(false);

// 分类导航数据
const slides = ref([
  { categoryName: '热点', href: 'http://news.sina.com.cn/hotspot', image: { src: '/images/1.png', alt: '热点图片' } },
  { categoryName: '聚焦', href: 'http://news.sina.com.cn/focus', image: { src: '/images/2.png', alt: '聚焦图片' } },
  { categoryName: '天下', href: 'http://news.sina.com.cn/world', image: { src: '/images/3.png', alt: '天下图片' } },
  { categoryName: '百态', href: 'http://news.sina.com.cn/ent', image: { src: '/images/4.png', alt: '百态图片' } },
  { categoryName: '军事', href: 'http://mil.news.sina.com.cn/', image: { src: '/images/5.png', alt: '军事图片' } }
]);

// 当前播放图片的索引
const playing = ref(0);

// 当前显示的图片信息
const currentImage = ref(slides.value[playing.value].image);

// 显示登录弹窗
const showLoginBox = () => {
  isLoginBoxVisible.value = true;
};

// 隐藏登录弹窗
const hideLoginBox = () => {
  isLoginBoxVisible.value = false;
};

// 保持登录弹窗显示（当鼠标在弹窗内时）
const keepLoginBoxVisible = () => {
  isLoginBoxVisible.value = true;
};

// 点击X按钮关闭弹窗
const closeLoginBox = () => {
  isLoginBoxVisible.value = false;
};

// 跳转到相应图片
const jump = (index) => {
  playing.value = index;
  currentImage.value = slides.value[index].image;
};
</script>

<style>
/* 添加 active 样式类的样式 */
.active {
  background-color: #f0f0f0;
  /* 你可以根据需要添加其他样式 */
}
</style>
